<div class="card card-default gutter-b  card-outline" *ngIf="menuItemDto">
    <div class="card-header align-items-center border-0">
        <h3 class="card-title align-items-start flex-column marginHalf">
            <span class="font-weight-bolder text-dark" *ngIf="editing && !menuItemDto.id && !menuItemDto.parentId">
                {{'AddRootMenuItem' | localize}}
            </span>
            <span class="font-weight-bolder text-dark" *ngIf="editing && !menuItemDto.id && menuItemDto.parentId">
                {{'AddSubMenuItem' | localize}}：{{ parentDisplayName}}
            </span>
            <span class="font-weight-bolder text-dark" *ngIf="editing && menuItemDto.id">
                {{'EditMenuItem' | localize}}
            </span>
        </h3>
        <div class="card-tools">
            <button [disabled]="saving" type="button" class="btn btn-default btn-circle mr-1"
                    (click)="close()"><i class="bi bi-x"></i>{{"Cancel" | localize}}</button>
            <button type="submit" [hidden]="readonly" class="btn btn-primary btn-circle blue"  (click)="save()"
                    [buttonBusy]="saving" [busyText]="l('SavingWithThreeDot')">
                    <i class="fa fa-save"></i>
                    <span>{{"Save" | localize}}</span>
            </button>
        </div>
    </div>
    <div class="card-body">
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                    <label>{{'MenuItemDisplayName' | localize}}</label>
                    <input class="form-control" (change)="getRouteStr()" type="text" [ngClass]="{'edited':menuItemDto.displayName}"
                           required [(ngModel)]="menuItemDto.displayName" name="displayName"
                           maxlength="128">
                </div>
            </div>
        </div>
        <div class="row" *ngIf="multiLocal">
            <div class="col-sm-12">
                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                    <label>{{'Localization' | localize}}</label>
                    <input class="form-control" type="text" [ngClass]="{'edited':menuItemDto.localDisplayName}"
                           [(ngModel)]="menuItemDto.localDisplayName" name="Localization" maxlength="128">
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                    <div class="input-icon input-icon-sm right">
                        <i class="fa fa-question-circle" [tooltip]="popTemplate"></i>
                        <label>{{'CustomLink' | localize}}</label>
                        <input class="form-control" type="text" [ngClass]="{'edited':menuItemDto.routeUrlStr}"
                               [(ngModel)]="menuItemDto.routeUrlStr" name="routeUrlStr"
                               maxlength="350">
                    </div>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                    <label>{{'ExternalLink' | localize}}</label>
                    <input class="form-control" type="text" [ngClass]="{'edited':menuItemDto.customUrl}"
                           [(ngModel)]="menuItemDto.customUrl" name="customUrl"
                           maxlength="300">
                </div>
            </div>
        </div>

        <div class="row">
            <div class="col-sm-12">
                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                    <label>{{'BackendPage' | localize}}</label>
                    <select class="form-control" name="backEndModule"
                            [(ngModel)]="menuItemDto.backEndModuleId" >
                        <option value="#">{{'EmptyOnes'|localize}}</option>
                        <option *ngFor="let rec of selects.backEndModule" [value]="rec.value">
                            {{rec.name}}
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                    <label>{{'FrontendPage' | localize}}</label>
                    <select class="form-control" name="frontEndPage" [(ngModel)]="menuItemDto.frontEndPageId">
                        <option value="#">{{'EmptyOnes'|localize}}</option>
                        <option *ngFor="let rec of frontEndPages[menuItemDto.backEndModuleId]" [value]="rec.value">
                            {{rec.name}}
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                    <label>{{'MenuItemDisplayMode' | localize}}</label>
                    <select class="form-control" name="displayType"
                            [(ngModel)]="menuItemDto.displayType">
                        <option value="#">{{'EmptyOnes'|localize}}</option>
                        <option *ngFor="let rec of selects.displayType" [value]="rec.value">
                            {{rec.name}}
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row" >
            <div class="col-sm-12">
                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                    <label>{{'MenuItemAttachTo' | localize}}</label>
                    <select class="form-control" name="deviceType"
                            [(ngModel)]="menuItemDto.deviceType">
                        <option value="#">{{'EmptyOnes'|localize}}</option>
                        <option *ngFor="let rec of selects.deviceType" [value]="rec.value">
                            {{rec.name}}
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                    <label>{{'BackendMenuType' | localize}}</label>
                    <select class="form-control" name="backendMenuType"
                            [(ngModel)]="menuItemDto.backendMenuType">
                        <option value="#">{{'EmptyOnes'|localize}}</option>
                        <option *ngFor="let rec of selects.backendMenuType" [value]="rec.value">
                            {{rec.name}}
                        </option>
                    </select>
                </div>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <label for="isActive" class="checkbox">
                    <input id="isActive" class="md-check"
                           type="checkbox" name="isActive"
                           [(ngModel)]="menuItemDto.isActive">
                    <span></span>
                    {{"Enable" | localize}}
                </label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12" >
                <label for="isNavigation4FrontEnd" class="checkbox">
                    <input id="isNavigation4FrontEnd" class="md-check"
                           type="checkbox" name="isNavigation4FrontEnd"
                           [(ngModel)]="menuItemDto.isNavigation4FrontEnd">
                    <span></span>
                    {{"IsANavigationMenuItem" | localize}}
                </label>
            </div>
        </div>
        <div class="row" >
            <div class="col-sm-12" *ngIf="false">
                <label for="homeRecommendation" class="checkbox">
                    <input id="homeRecommendation" class="md-check"
                           type="checkbox" name="homeRecommendation"
                           [(ngModel)]="menuItemDto.homeRecommendation">
                    <span></span>
                    {{"HomeRecommendation" | localize}}
                </label>
            </div>
        </div>
        <div class="row" *ngIf="false">
            <div class="col-sm-12">
                <label for="channelRecommendation" class="checkbox">
                    <input id="channelRecommendation" class="md-check"
                           type="checkbox" name="channelRecommendation"
                           [(ngModel)]="menuItemDto.channelRecommendation">
                    <span></span>
                    {{"ChannelRecommendation" | localize}}
                </label>
            </div>
        </div>
        <div class="row">
            <div class="col-sm-12">
                <label for="isSpecial" class="checkbox">
                    <input id="isSpecial" class="md-check"
                           type="checkbox" name="isSpecial"
                           [(ngModel)]="menuItemDto.isSpecial">
                    <span></span>
                    {{"IsTheMenuItemForIndexPage" | localize}}
                </label>
            </div>
        </div>
        <div class="row" *ngIf="dataSynchronous">
            <div class="col-sm-12">
                <label for="autoSynchronous" class="checkbox">
                    <input id="autoSynchronous" class="md-check"
                           type="checkbox" name="autoSynchronous"
                           [(ngModel)]="menuItemDto.autoSynchronous">
                    <span></span>
                    {{"AutoSynchronous" | localize}}
                </label>
            </div>
        </div>
        <div class="row" *ngIf="dataSynchronous">
            <div class="col-sm-12">
                <label for="autoSynchronousForContent" class="checkbox">
                    <input id="autoSynchronousForContent" class="md-check"
                           type="checkbox" name="autoSynchronousForContent"
                           [(ngModel)]="menuItemDto.autoSynchronousForContent">
                    <span></span>
                    {{"AutoSyncContent" | localize}}
                </label>
            </div>
        </div>
        <div class="row" style="display: none;">
            <div class="col-sm-12">
                <label>{{'MenuTypes' | localize}}</label>
                <select class="form-control edited" name="menuType" multiple="multiple"
                        [(ngModel)]="menuItemGroupArray">
                    <option *ngFor="let rec of selects.itemGroups" [value]="rec.value">
                        {{rec.name}}
                    </option>
                </select>
            </div>
        </div>
        <div class="row" >
            <div class="col-sm-12">
                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                    <label>{{'CustomData' | localize}}</label>
                    <textarea class="form-control" type="text" row="4" readonly [(ngModel)]="menuItemDto.customData"
                              name="customData"> </textarea>
                </div>
            </div>
        </div>
        <div class="row" *ngIf="false">
            <div class="col-sm-12">
                <div class="form-group form-md-line-input form-md-floating-label no-hint">
                    <label>{{'Icon' | localize}}</label>
                    <input class="form-control" type="text" [ngClass]="{'edited':menuItemDto.backendIcon}"
                           [(ngModel)]="menuItemDto.backendIcon" name="backendIcon"
                           maxlength="250">
                </div>
            </div>
        </div>
    </div>
</div>

<ng-template #popTemplate><div [innerHtml]="'MenuRouteStr_Hint' | localizeAndTrustAs :'html'"></div></ng-template>
